<template>
  <div class='lesson-video'>
    <van-nav-bar
      title="课程视频播放"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="prism-player" id="player-con"></div>
  </div>
</template>

<script>
// eslint-disable-next-line
import { videoPlayInfo } from '@/services/course';

export default {
  name: 'LessonVideo',
  props: ['lessonId'],
  components: {

  },
  data() {
    return {
      player: null,
      fileId: '',
      playAuth: '',
    };
  },
  created() {
    this.loadVideo();
  },
  methods: {
    async loadVideo() {
      const { data } = await videoPlayInfo(this.lessonId);
      if (data.state === 1 && data.content) {
        this.fileId = data.content.fileId;
        this.playAuth = data.content.playAuth;
        this.initPlayer();
      } else {
        this.$toast.fail('未找到课程视频信息');
      }
    },
    initPlayer() {
      this.player = new window.Aliplayer({
        id: 'player-con',
        vid: this.fileId,
        playauth: this.playAuth,
        qualitySort: 'asc',
        format: 'mp4',
        mediaType: 'video',
        width: '100%',
        height: '300px',
        autoplay: true,
        isLive: false,
        rePlay: false,
        playsinline: true,
        preload: true,
        controlBarVisibility: 'hover',
        useH5Prism: true,
      }, (player) => {
        console.log(player);
      });
    },
  },
};
</script>

<style lang='less' scoped>

</style>
